<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>书籍阅读</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link th:href="@{/moyue/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/moyue/css/book.css}" rel="stylesheet">
    <link th:href="@{/moyue/css/read.css}" rel="stylesheet">
    <link th:href="@{/moyue/css/loginortop.css}" rel="stylesheet">
    <link th:href="@{/moyue/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link rel="shortcut icon" th:href="@{/moyue/images/favicon.ico}" type="image/x-icon"/>
</head>
<body>
<div  class="read-photo">

</div>
<div class="read-header">
    <div class="read-header-nav">
        <ul>
            <div class="top-left-one"><a href="index.html" target="" style="font-size: 20px;color: #5e5e5e;margin-right: 20px">墨阅小说网</a></div>
            <li class="nav-one-book-1">
                <a href="javascript:;" style="color: #3c3c3c" class="nav-one-book-1">最近阅读</a>
                <div class="read-nav-one">
                    <div class="read-nav-one-book">
                        <div class="nav-one-book">
                            <img src="">
                            <div class="nav-one-book-s">
                                <h4 >牧神记</h4>
                                <h5>最新章节: <span>168章少时诵诗书</span></h5>
                                <h6>看到：<span>12章 闪乱神乐快捷酒店</span></h6>
                            </div>
                        </div>
                    </div>
                    <div class="nav-one-many">
                        查看更多
                    </div>
                </div>
            </li>
            <li class="nav-one-book-2">
                <i class="iconfont">&#xe66c;</i><a href="javascript:;" style="color: #3c3c3c">&nbsp;快速导航</a>
                <div class="read-nav-two">
                    <div class="nav-two">
                        <h4>书籍分类</h4>
                        <div class="nav-two-s">
                            <a href="javascript:;">玄幻</a>
                        </div>
                        <h4>其他</h4>
                        <div class="nav-two-s">
                            <a href="javascript:;">玄幻</a>
                            <a href="javascript:;">玄幻</a>
                            <a href="javascript:;">玄幻</a>
                        </div>
                    </div>
                </div>
            </li>
            <div class="nav-one-book-3">
                <div class="top-right-shou">
                    <input placeholder="斗罗大陆">
                    <i class="fa fa-search" style="margin-left: 10px;cursor:pointer"></i>
                    &nbsp;&nbsp;|
                </div>
                <div class="top-right-myhone">
                    <div class="myhone" th:if="${session.user}==null">
                        <span onclick="upup()">登录</span>&nbsp;&nbsp;
                        <span><a th:href="@{/moyue/user/registerUI}">注册</a> </span>
                    </div>
                    <div class="mylanded" th:if="${session.user}!=null">
                        <a th:href="@{/moyue/user/myhomehtml}"><span th:each="user : ${session.user}" th:text="${user.userName}"></span></a>

                    </div>&nbsp;&nbsp;|
                    <a class="mybook" onclick="yesuser()">
                        <i class="iconfont" style="font-size: 25px">&#xe650;</i>
                        <span style="line-height: 30px">充值</span>
                    </a>
                </div>
            </div>
        </ul>
    </div>
</div>
<div id="back"></div>
<div id="denglu">
    <div class="denglu-login">
        <div class="denglu-close" onclick="closes()"><i class="fa fa-close"></i></div>
        <div class="login-top">
            <div class="login-top-one">账号登陆</div>
        </div>
        <div class="login-center">关于墨阅网将实行<a href="#">手机绑定实名制的说明</a>
        </div>
        <input placeholder="手机/邮箱/用户名" id="user">
        <input placeholder="密码" id="password" type="password">
        <div class="self-motion">
            <input type="checkbox" style="width: 15px;height: 15px;margin: 0px">
            <span>下次自动登录</span>
        </div>
        <a th:href="@{/moyue/user/forgetPwdUI}" target="_blank" class="wangji">忘记密码</a>
        <a href="#"><div class="denglu-button" onclick="login()">登陆</div></a>
        <div class="denglu-three">
            <p>使用第三方账号登录</p>
            <div class="three-ss">
                <a href="javascript:;" class="three-ss-qq" style="background-color: #FF0036;font-size:25px;"><i class="fa fa-weibo" title="新浪微博"></i></a>
                <a href="https://github.com/login/oauth/authorize?client_id=6c861c60eb9fd46cfc6d" class="three-ss-qq" style="background-color: #111111;font-size: 25px" methods="get"><i class="fa fa-github" title="GitHub"></i> </a>
                <a href="javascript:;" class="three-ss-qq" style="background-color: #0a6397;font-size: 25px"><i class="fa fa-qq" title=""></i> </a>
                <a href="javascript:;" class="three-ss-qq" style="background-color: #419641;font-size: 25px"><i class="fa fa-linkedin" title=""></i> </a>
            </div>
            <p style="margin-top: 70px;padding-top: 10px;border-top: 1px solid #D1CCC7;">没有账号？<a th:href="@{/moyue/user/registerUI}" target="_blank" style="color: #36a803;">立即申请</a></p>
        </div>
    </div>
</div>
<div class="read-pos">
    <a th:href="@{/moyue/user/index}">首页</a><span><i class="iconfont">&#xe656;</i></span>
    <a th:text="${parentype}">玄幻</a><span><i class="iconfont">&#xe656;</i></span>
    <a th:text="${subtype}">东方玄幻</a><span><i class="iconfont">&#xe656;</i></span>
    <a th:text="${book.bookName}">牧神记</a>
</div>
<div class="reward">
    <div class="reward-clos" onclick="dsclose()"><i class="iconfont">&#xe62c;</i></div>
    <div class="reward-nav">
        <h3 style="letter-spacing: 8px; font-size:24px;"><b>打赏</b></h3>
        <div class="vote-popup">
            <div class="vote-popup-wrap">
                <div class="popup-wrip popup-wrip-s" id="pop1" onclick="colorpop($('#pop1'),$('.spanp1').html())" >
                    <span class="spanp1">100</span><span>点</span>
                    <i class="iconfont">&#xe602;</i>
                </div>

                <div class="popup-wrip" id="pop2" onclick="colorpop($('#pop2'),$('.spanp2').html())">
                    <span class="spanp2">300</span><span>点</span>
                    <i class="iconfont">&#xe602;</i>
                </div>
                <div class="popup-wrip" id="pop3" onclick="colorpop($('#pop3'),$('.spanp3').html())">
                    <span class="spanp3">600</span><span>点</span>
                    <i class="iconfont">&#xe602;</i>
                </div>
                <div class="popup-wrip" id="pop4" onclick="colorpop($('#pop4'),$('.spanp4').html())">
                    <span class="spanp4">1000</span>点
                    <i class="iconfont">&#xe602;</i>
                </div>
                <div class="popup-wrip " id="pop5" onclick="colorpop($('#pop5'),$('.spanp5').html())" >
                    <span class="spanp5">1万</span><span>点</span>
                    <i class="iconfont">&#xe602;</i>
                </div>

                <div class="popup-wrip" id="pop6" onclick="colorpop($('#pop6'),$('.spanp6').html())">
                    <span class="spanp6">5万</span><span>点</span>
                    <i class="iconfont">&#xe602;</i>
                </div>
                <div class="popup-wrip" id="pop7" onclick="colorpop($('#pop7'),$('.spanp7').html())">
                    <span class="spanp7">10万</span><span>点</span>
                    <i class="iconfont">&#xe602;</i>
                </div>
                <div class="popup-wrip" id="pop8" onclick="colorpop($('#pop8'),$('.spanp8').html())">
                    <span class="spanp8">100万</span>点
                    <i class="iconfont">&#xe602;</i>
                </div>
                <div class="popup-wrip" id="pop9" onclick="colorpop($('#pop9'),$('.spanp9').html())">
                    <span class="spanp9">500万</span>点
                    <i class="iconfont">&#xe602;</i>
                </div>
            </div>
            <div class="vote-popup-wrapper">
                账户余额<span id="account"></span>起点币·本次打赏<span id="currency">100</span>起点币
            </div>
            <input type="hidden" th:value="${book.bookId}" class="bookid">
            <div class="popup-btn">
                <div class="pop-red">
                    <span  onclick="exception()" >确认打赏</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="read-center">
    <i class="iconfont read-shu">&#xe624;</i>
    <h4 th:text=" '第'+ ${booklist.bookListOrder} + '章'+ ${booklist.bookListName} "></h4>
    <div class="read-center-rep">
        <a href="javascript:;">
            <i class="iconfont">&#xe815;</i>
            <span th:text="${book.bookName}">牧神记</span>
        </a>
        <a href="javascript:;">
            <i class="iconfont">&#xe615;</i>
            <span th:text="${book.authorName}">宅猪</span>
        </a>
        <em>
            <i class="iconfont">&#xe68a;</i>
            <span th:text="${booklist.bookListSize}"></span><span>字</span>
        </em>
        <em>
            <i class="iconfont">&#xe60e;</i>
            <span th:text="${book.bookUpdateDate}"></span>
        </em>
    </div>
    <div class="read-center-book" >
        <p th:each="paragraphlist:${paragraphlist}" th:text=" '&nbsp;&nbsp;&nbsp;' +  ${paragraphlist}"></p>

    </div>
    <div class="read-center-pn">
        <div class="read-center-prev">
            <a th:if="${lastchapter}>0"  th:href="'/moyue/book/chapterView/'+${book.getBookId()}+'/'+${lastchapter}">上一章</a>
        </div>
        <div class="read-center-next">
            <a th:if="${nextchapter}>0 " th:href="'/moyue/book/chapterView/'+${book.getBookId()}+'/'+${nextchapter}">下一章</a>
        </div>
    </div>
    <div class="read-left">
        <dl>
            <dd>
                <a href="javascript:;" onclick="bookmu()"  >
                    <i>
                        <em class="iconfont" style="display:block;font-size: 18px ">&#xe601;</em>
                        <span>目录</span>
                    </i>
                </a>
                <div class="read-left-one none" id="left-one">
                    <i class="iconfont left-cuo" onclick="bookreve($('.read-left-one'))">&#xe62c;</i>
                    <div class="left-one">
                        <a href="javascript:;">目录</a>
                        <a href="javascript:;">书签</a>
                    </div>
                    <div class="left-one-look none">
                        <div class="no-data none">
                            <i class="iconfont no-datas">&#xe655;</i>
                            <p>暂时无标签，请添加标签后查看</p>
                        </div>
                        <div class="have-data">
                            <ul>

                            </ul>
                        </div>
                    </div>
                    <div class="left-one-mo" >
                        <!--<div class="mo-one" id="mo-1" onclick="bookreve($('#inter-1'))">-->
                            <!--<div class="mo-one-t">作品相关</div>-->
                            <!--<i class="iconfont mo-one-i">&#xe668;</i>-->
                        <!--</div>-->
                        <!--<div class="mo-one-inter none" id="inter-1">-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->

                        <!--</div>-->
                        <div class="mo-one" id="mo-2" onclick="bookreve($('#inter-2'))">
                            <div class="mo-one-t">章节目录</div>
                            <i class="iconfont mo-one-i">&#xe668;</i>
                        </div>
                        <div class="mo-one-inter" id="inter-2">
                                <a th:each=" booklist : ${bookLists}" th:href="'/moyue/book/chapterView/'+ ${booklist.bookId}+ '/' +${booklist.bookListOrder}">
                                    <span th:text="'第'+ ${booklist.bookListOrder} +'章 ' + ${booklist.bookListName}"></span>
                                </a>
                        </div>
                        <!--<div class="mo-one" id="mo-3" onclick="bookreve($('#inter-3'))">-->
                            <!--<div class="mo-one-t">正文卷</div>-->
                            <!--<i class="iconfont mo-one-i">&#xe668;</i>-->
                        <!--</div>-->
                        <!--<div class="mo-one-inter none" id="inter-3">-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                            <!--<a href="javascript:;">摔跤的还是低</a>-->
                        <!--</div>-->
                    </div>
                </div>
            </dd>
            <dd>
                <a href="javascript:;" onclick="bookgeng()">
                    <i>
                        <em class="iconfont" style="display:block;font-size: 18px ">&#xe78a;</em>
                        <span>设置</span>
                    </i>
                </a>
                <div class="read-left-two none" id="left-two">
                    <i class="iconfont left-cuo" onclick="bookreve($('.read-left-two'))">&#xe62c;</i>
                    <h4>设置</h4>
                    <ul>
                        <li>
                            <i>阅读主题</i>
                            <span class="bgc-0 bgc-1 " title="默认" onclick="readbook($('.bgc-1'), )" >
                                <em class="iconfont" style="color:#FF0036;font-size: 20px">&#xe633;</em>
                            </span>
                            <span class="bgc-0 bgc-2 bgc" title="牛皮纸" onclick="readbook($('.bgc-2'),)">
                                <em class="iconfont" style="color:#FF0036">&#xe633;</em>
                            </span>
                            <span class="bgc-0 bgc-3" title="淡绿色" onclick="readbook($('.bgc-3'),)">
                                <em class="iconfont" style="color:#FF0036">&#xe633;</em>
                            </span>
                            <span class="bgc-0 bgc-4" title="淡蓝色" onclick="readbook($('.bgc-4'),)">
                                <em class="iconfont" style="color:#FF0036">&#xe633;</em>
                            </span>
                            <span class="bgc-0 bgc-5" title="淡粉色" onclick="readbook($('.bgc-5'),)">
                                <em class="iconfont" style="color:#FF0036">&#xe633;</em>
                            </span>
                            <span class="bgc-0 bgc-6" title="灰色" onclick="readbook($('.bgc-6'),)">
                                <em class="iconfont" style="color:#FF0036">&#xe633;</em>
                            </span>
                        </li>
                        <li>
                            <i>正文字体</i>
                            <span class="ztx " id="ztx-1" onclick="readbook('',$('#ztx-1'))">雅黑</span>
                            <span class="ztx" id="ztx-2" onclick="readbook('',$('#ztx-2'))">宋体</span>
                            <span class="ztx ztx-0" id="ztx-3" onclick="readbook('',$('#ztx-3'))">楷体</span>
                        </li>
                        <li>
                            <i>字体大小</i>
                            <div class="two-look">
                                <span class="look-prev" onclick="sizejx()">
                                    <i class="iconfont">&#xe60d;</i>
                                </span>
                                <span class="look-long" id="long">20</span>
                                <span class="look-next" onclick="sizezd()">
                                    <i class="iconfont">&#xe60f;</i>
                                </span>
                            </div>
                        </li>
                        <li>
                            <i>页面宽度</i>
                            <div class="two-ye">
                                <span class="ye-prev" onclick="sizebz()">
                                    <i class="iconfont" style="font-size: 16px">&#xe66e;</i>
                                </span>
                                <span class="ye-long">800</span>
                                <span class="ye-next" onclick="sizebk()">
                                    <i class="iconfont" style="font-size: 16px">&#xe678;</i>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </dd>
            <dd>
                <a th:href="@{/moyue/book/bookcaselist}">
                    <i>
                        <em class="iconfont" style="display:block;font-size: 18px ">&#xe603;</em>
                        <span>书架</span>
                    </i>
                </a>
            </dd>
            <dd>
                <a href="" th:href="'/moyue/book/bookView/'+ ${book.bookId} ">
                    <i>
                        <em class="iconfont" style="display:block;font-size: 18px ">&#xe634;</em>
                        <span>书页</span>
                    </i>
                </a>
            </dd>
        </dl>
    </div>
    <div class="read-right">
        <dl>
            <dd>
                <a onclick="ynuser()">
                    <i>
                        <em class="iconfont" style="display:block;font-size: 18px ">&#xe650;</em>
                        <span>打赏</span>
                    </i>
                </a>
            </dd>
            <dd>
                <a href="">
                    <i>
                        <em class="iconfont" style="display:block;font-size: 18px ">&#xe651;</em>
                        <span>评论</span>
                    </i>
                </a>
            </dd>
            <dd onclick="huitop()">
                <a href="">
                    <i>
                        <em class="iconfont" style="display:block;font-size: 18px;line-height: 50px ">&#xe616;</em>
                    </i>
                </a>
            </dd>
        </dl>
    </div>
</div>
</body>
<!--<script src="js/jquery-3.3.1.min.js"></script>-->
<!--<script src="js/bootstrap.min.js"></script>-->
<!--<script type="text/javascript" src="js/all.js"></script>-->
<script th:src="@{/moyue/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/moyue/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/all.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/read.js}"></script>
</html>